<template>
  <div class="preparation">
    <a-row>
      <a-col :span="4">
        <ul class="tabs">
          <li :class="{active: current === index}" v-for="(item, index) in ['小组组员（小节）参与反馈表', '小组活动完成情况报表', '小组活动月报表', '小组活动社工自评表', '小组活动督导评估表', '小组活动满意度测评表', '小组活动照片记录表', '小组活动评估总结报告']" @click="current = index">{{item}}</li>
        </ul>
      </a-col>
      <a-col :span="20">
        <table1 v-if="current == 0" :detail="detail"></table1>
        <table2 v-if="current == 1"></table2>
        <table3 v-if="current == 2"></table3>
        <table4 v-if="current == 3" :detail="detail"></table4>
        <table5 v-if="current == 4" :detail="detail"></table5>
        <table6 v-if="current == 5"></table6>
        <table7 v-if="current == 6"></table7>
        <table8 v-if="current == 7"></table8>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import table1 from './components/table1'
  import table2 from './components/table2'
  import table3 from './components/table3'
  import table4 from './components/table4'
  import table5 from './components/table5'
  import table6 from './components/table6'
  import table7 from './components/table7'
  import table8 from './components/table8'
  export default {
    props: {
      detail: Object
    },
    components: {
      table1,
      table2,
      table3,
      table4,
      table5,
      table6,
      table7,
      table8
    },
    data() {
      return {
        current: 0,
      }
    }
  }
</script>

<style lang="less" scoped>
  .preparation {
    width: 100%;
    background-color: #fff;
    .tabs{
      list-style: none;
      padding: 0;
      li{
        padding: 16px 24px;
        padding-left: 0;
        text-align: right;
        border-right: 3px solid transparent;
        cursor: pointer;
      }
      .active{
        color: rgb(24, 144, 255);
        border-color: rgb(24, 144, 255);
      }
    }
  }
</style>
